<template id='InviteRecord'>
  <div class="InviteRecord">
    <div class="pc">
      <div class="pcContent"></div>
    </div>
    <div class="phone">
      <div class="phoneContent">
        <div
          class="recordItem"
          v-for="(item, index) in recordList"
          :key="index"
        >
          <img :src="item.avatar" />
          <p class="recordItemName">{{ item.nickname }}</p>
          <div class="recordItemInfo">
            <p class="recordItemPhone">{{ item.phone }}</p>
            <p class="recordItemTime">{{ item.add_time }}</p>
          </div>
        </div>
      </div>
      <div class="phoneTips" v-if="recordList.length >= 9">
        没有更多的邀请记录了哦~
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { inviteRecordApi } from "@/api";
import { iscode } from "@/utils";
export default {
  name: "InviteRecord",
  components: {},
  // 定义属性
  data() {
    return {
      recordList: [],
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    protectNumber(number) {
      if (number.length == 11) {
        let trimNumber = number.replace(/^(.{3}).*(.{4})$/, "$1****$2");
        return trimNumber;
      } else {
        return number;
      }
    },

    async inviteRecord() {
      let result = await inviteRecordApi({ page: 1, pagesize: 9999 });
      if (iscode(result)) {
        this.recordList = result.result.list;
        this.recordList.map((item, index) => {
          if (!item.avatar) {
            item.avatar = require("@/assets/images/invite/defaultIcon.png");
          }
          if (!item.nickname) {
            item.nickname = "METAUP";
          }
        });
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.inviteRecord();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.InviteRecord {
  p {
    margin: 0;
  }
  .pc {
  }
  .phone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .InviteRecord {
    .pc {
      display: none;
    }
    .phone {
      display: block;
      padding: 40px 30px;
      background: #1e2020;
      min-height: 90vh;
      .phoneContent {
        .recordItem {
          border-bottom: 2px solid #333333;
          padding: 30px 0;
          display: flex;
          align-items: center;
          img {
            width: 76px;
            height: 76px;
            margin-right: 20px;
          }
          .recordItemName {
            font-size: 28px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }
          .recordItemInfo {
            margin-left: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .recordItemPhone {
              font-size: 24px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
            }
            .recordItemTime {
              margin-top: 14px;
              font-size: 24px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
        }
      }
      .phoneTips {
        margin-top: 50px;
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        text-align: center;
      }
    }
  }
}
</style>